<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
    <script type="text/javascript" src="/static/easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/1.4.1/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
    <script type="text/javascript" src="/static/js/DateUtil.js"></script>
</head>
<body>
<!--<div style="margin:10px 0;"></div>-->
<table id="tg" class="easyui-treegrid" title="权限"
       data-options="singleSelect:true,
            method: 'get',
            animate: true,
            url: '/permission/list',
            idField: 'id',
            treeField: 'name',
            onContextMenu: onContextMenu,
            fitColumns:true,
			pagination:true,
            toolbar: '#tb',
            pageSize: 50,
            pageList: [10,20,50,100,500]
			">
    <thead>
    <tr>
        <th data-options="field:'id',width:50,editor:'text'">Id</th>
        <th data-options="field:'name',width:100,editor:'text'">名称</th>
        <th data-options="field:'type',width:50,align:'right',editor:'numberbox',formatter:Common.formatTypeStatus">类型
        </th>
        <th data-options="field:'url',width:80,editor:'text'">URL</th>
        <th data-options="field:'iconCls',width:50,editor:'text'">图标</th>
        <th data-options="field:'permission',width:50,editor:'text'">权限</th>
        <th data-options="field:'status',width:50,align:'right',editor:'numberbox',formatter:Common.formatStatus">状态
        </th>
        <th data-options="field:'createTime',width:80,editor:'datebox',formatter:Common.formatDate">创建时间</th>
        <th data-options="field:'updateTime',width:80,editor:'datebox',formatter:Common.formatDate">更新时间</th>
        <th data-options="field:'memo',width:80,editor:'text'">备注</th>
    </tr>
    </thead>
</table>

<div id="tb">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addView()">新建视图</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">New
        Permission</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">Edit
        Permission</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="remove()">Remove
        Permission</a>
</div>

<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="add()" data-options="iconCls:'icon-add'">添加</div>
    <div onclick="edit()" data-options="iconCls:'icon-edit'">修改</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">删除</div>
    <div class="menu-sep"></div>
    <div onclick="collapse()">收缩</div>
    <div onclick="expand()">展开</div>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">Permission Information</div>
    <form id="fm" method="post" novalidate>
        <input id="_parentId" name="_parentId" type="hidden">
        <table>
            <tr>
                <td>Name:</td>
                <td><input name="name" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>type:</td>
                <td><input name="type" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>permission:</td>
                <td><input name="permission" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>status:</td>
                <td><input name="status" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>desc:</td>
                <td><input name="desc" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input name="url" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

<div id="view-dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px"
     closed="true" buttons="#view-dlg-buttons">
    <div class="ftitle">新建视图</div>
    <form id="view-fm" method="post" novalidate>
        <table>
            <tr>
                <td>视图名称:</td>
                <td><input name="name" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>唯一标识:</td>
                <td><input name="view" class="easyui-validatebox" required="true" type="text"/></td>
            </tr>
            <tr>
                <td>视图选项:</td>
                <td>
                    <label><input id="action" name="action" type="checkbox" value="all"
                                  onclick="addViewAll()"/>：全选</label>
                    <label><input id="action1" name="action" type="checkbox" value="save"/>：增</label>
                    <label><input name="action" type="checkbox" value="delete"/>：删</label>
                    <label><input name="action" type="checkbox" value="update"/>：改</label>
                    <label><input name="action" type="checkbox" value="view"/>：查</label>
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="view-dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveView()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#view-dlg').dialog('close')">取消</a>
</div>

<script type="text/javascript">
    var url;

    function addViewAll() {
//        $("input[name='action']").attr("checked",$(this).attr("checked"));
//        $("input[name='action']").setAttribute("checked", true);
//        $('input:checkbox').each(function() {
//            $(this).attr('checked', true);
//            $('#action1').attr('checked', true);
//        });
        var checkbox = document.getElementsByName("action");
        for (var i = 1; i < checkbox.length; i++) {
            checkbox[i].checked = checkbox[0].checked;
        }
//        document.getElementById("action1").checked=true;
//        $('#action1').attr('checked', true);
    }

    function addView() {
        $('#view-dlg').dialog('open').dialog('setTitle', '新建视图');
        $('#view-fm').form('clear');
        url = '/permission/view/save'
    }

    function saveView() {
        $('#view-fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $('#view-dlg').dialog('close');		// close the dialog
                    $('#tg').treegrid('reload');	// reload the user data
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }

    function onContextMenu(e, row) {
        e.preventDefault();
        $(this).treegrid('select', row.id);
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
    function add() {
        var node = $('#tg').treegrid('getSelected');
        $('#dlg').dialog('open').dialog('setTitle', 'New Permission');
        $('#fm').form('clear');
        $('#_parentId').val(node.id);
        url = '/permission/save';
    }
    function edit() {
        var row = $('#tg').treegrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('setTitle', 'Edit Permission');
            $('#fm').form('load', row);
            url = '/permission/update/' + row.id;
        }
    }
    function remove() {
        var node = $('#tg').treegrid('getSelected');
        $.post('/permission/delete/' + node.id, {id: node.id}, function (result) {
            if (result.success) {
                $('#tg').treegrid('reload');	// reload the user data
            } else {
                $.messager.show({	// show error message
                    title: 'Error',
                    msg: result.msg
                });
            }
        }, 'json');
    }
    function save() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $('#dlg').dialog('close');		// close the dialog
                    $('#tg').treegrid('reload');	// reload the user data
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }

    function collapse() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            $('#tg').treegrid('collapse', node.id);
        }
    }
    function expand() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            $('#tg').treegrid('expand', node.id);
        }
    }

</script>
</body>
</html>